<template>
    <Modal v-model="representativeModal" width="780" class="col-2" :closable="false" :mask-closable="false">
        <div slot="header">
            完善舱单传输人信息
            <Icon class="f-fr" type="ios-close" @click="cancel"/>
        </div>
        <Form :model="companyForm" ref="companyRef" label-position="right" :rules="rules" :label-width="150" inline>
            <Row>
                <Col span="12">
                <FormItem label="舱单传输人名称：" prop="representativePerson" class="representativePerson">
                    <Input v-model="companyForm.representativePerson" @keyup.native="setAssignFocus('customsMaster')"></Input>
                </FormItem>
                </Col>
                <Col span="12">
                <FormItem label="备案关区：" prop="customsMaster" class="customsMaster">
                    <Select
                        v-model="companyForm.customsMaster"
                        class="input-width"
                        filterable
                        :transfer="true"
                        clearable
                        @keyup.native="setAssignFocus('representativeCode')"
                        style="width: 208px;"
                    >
                        <Option
                            v-for="(item, index) in customsCodeList"
                            :key="index"
                            :value="item.dataCode"
                            :label="item.shortName"
                        >{{item.dataCode+'/'+item.shortName}}</Option>
                    </Select>
                </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="12">
                <FormItem label="舱单传输人代码：" prop="representativeCode" class="clientId">
                    <Input v-model="companyForm.representativeCode" @keyup.native="setAssignFocus('icCode')"></Input>
                </FormItem>
                </Col>
                <Col span="12">
                <FormItem label="单一窗口客户端ID：" prop="clientId" class="clientId">
                    <Input v-model="companyForm.clientId" @keyup.native="setAssignFocus('representativeCode')"></Input>
                </FormItem>
                </Col>
            </Row>
        </Form>
        <div slot="footer">
            <div slot="footer">
                <Button type="primary" @click="save">确定</Button>
                <Button type="default" @click="cancel">取消</Button>
            </div>
        </div>
    </Modal>
</template>

<script>
import { httpPost } from '@/libs/http'
import $ from 'jquery'
export default {
    name: 'RepresentativeModal',
    data () {
        return {
            representativeModal: false,
            companyForm: {
                representativePerson: '',
                customsMaster: '',
                representativeCode: '',
                clientId: ''
            },
            customsCodeList: [],
            rules: {
                representativePerson: [
                    { required: true, message: '请输入舱单传输人名称', trigger: 'blur' }
                ],
                customsMaster: [
                    { required: true, message: '请设置备案关区', trigger: 'change' }
                ],
                representativeCode: [
                    { required: true, message: '请输入舱单传输人代码', trigger: 'blur' }
                ],
                clientId: [
                    { required: true, message: '请输入单一窗口客户端ID', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        init (companyObj, customsCodeList) {
            this.representativeModal = true
            for (let i in companyObj) {
                this.companyForm[i] = companyObj[i]
            }
            this.customsCodeList = customsCodeList
        },

        save () {
            this.$refs['companyRef'].validate((valid) => {
                if (!valid) {
                    return false
                }
                httpPost('/customs/sys/saveDecInfo', this.companyForm).then(res => {
                    if (res.isSuccess) {
                        this.$Message.success(res.responseMsg)
                        this.$emit('saveRepresentative', this.companyForm)
                        this.cancel()
                    }
                })
            })
        },

        cancel () {
            this.representativeModal = false
        },

        // 设置指定的元素获得焦点
        setAssignFocus (className) {
            let event = window.event || arguments[0]
            if (event.keyCode === 13) {
                let ele = document.getElementsByClassName(className)[0]
                let t = $(ele).find('.ivu-select-input')

                if (t.length) {
                    t.focus()
                } else {
                    $(ele).find('.ivu-input').focus()
                }
            }
        }
    }
}
</script>

<style scoped>

</style>
